<template>
  <div class="app">
    <h1>虚拟列表演示 (10,000条数据)</h1>
    
    <div class="controls">
      <input
        :value="inputValue"
        @input="handleInput"
        placeholder="搜索用户..."
        class="search-input"
      />
      <div class="options">
        <label>
          <input type="radio" v-model="mode" value="fixed" /> 固定高度
        </label>
        <label>
          <input type="radio" v-model="mode" value="dynamic" /> 动态高度
        </label>
      </div>
    </div>

    <div class="list-container">
      <VirtualList
        :items="filteredData"
        :item-height="itemHeight"
        :buffer="5"
        :dynamic="mode === 'dynamic'"
      >
        <template #default="{ item }">
          <div class="user-item" :class="{ dynamic: mode === 'dynamic' }">
            <img :src="item.avatar" class="avatar" />
            <span class="name">{{ item.text }}</span>
          </div>
        </template>
      </VirtualList>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { generateUserData } from './utils/dataGenerator'
import { debounce } from './utils/debounce'
import VirtualList from './components/VirtualList.vue'

const allData = ref([])
const inputValue = ref('')
const searchQuery = ref('')
const mode = ref('fixed')
const itemHeight = 60

// 生成模拟数据
onMounted(() => {
  allData.value = generateUserData(10000)
})

// 过滤数据
const filteredData = computed(() => {
  if (!searchQuery.value) return allData.value
  return allData.value.filter(item =>
    item.text.toLowerCase().includes(searchQuery.value.toLowerCase())
  )
})

// 带防抖的输入处理
const handleInput = debounce((e) => {
  inputValue.value = e.target.value
  searchQuery.value = e.target.value
}, 1000)
</script>

<style>
/* 样式保持不变 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.app {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  margin-bottom: 20px;
  text-align: center;
}

.controls {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.search-input {
  padding: 10px;
  width: 100%;
  font-size: 16px;
}

.options {
  display: flex;
  gap: 15px;
}

.list-container {
  height: 600px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.user-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
  height: 60px;
}

.user-item.dynamic {
  height: auto;
  min-height: 60px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 15px;
}

.name {
  font-size: 16px;
}
</style>